
<template>
    <div class="Sidebottom" :key="route.fullPath">
        <!-- 侧边栏 -->
        <div class="SideBox">
            <span>
                欢迎用户：{{ Information.userNickname }}
            </span>
            <span class=" IoncFont" @click="HomeAcitve()">
                <span class="IoncFontSpan" :class="Mains.Home === 1 ? '' : 'active'">首页</span>
                <img src="../assets/SVG/Home.svg" alt="" v-if="Mains.Home === 1">
                <img src="../assets/SVG/HomeColor.svg" alt="" v-else>
            </span>
            <span class="IoncFont" @click="BuddyAcitve()">
                <span class="IoncFontSpan" :class="Mains.Buddy === 1 ? '' : 'active'">好友</span>
                <img src="../assets/SVG/Buddy.svg" alt="" v-if="Mains.Buddy === 1">
                <img src="../assets/SVG/BuddyColor.svg" alt="" v-else>
            </span>
            <span>{{ Mains.WebSocketMessageTitle }}</span>
            <button data-error @click="OutLogin">退出登录</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ClearToken, GetToken } from "../utils/Token";
import { useRouter, useRoute } from "vue-router"
import { main } from "../store/index"
import { ref, onMounted, watch } from "vue"
import Axios from "../Axios/Axios";
const Mains = main()
// import { ref } from "vue"
const route = useRoute()
const Information = ref({
    userNickname: ""
})
const router = useRouter()
watch(() => Mains.Buddy, () => {
    // BuddyAcitve()
})
onMounted(async () => {
    if (GetToken()) {
        await init()

    }
})
const HomeAcitve = () => {
    Mains.Home = 2
    Mains.Buddy = 1
    router.push({
        name: "/"
    })
}
const BuddyAcitve = () => {
    Mains.Buddy = 2
    Mains.Home = 1
    router.push({
        name: "/BuddyList"
    })
}

const OutLogin = () => {
    ClearToken()
    router.replace({

        path: "/",
        query: {
            id: 1
        }

    })
}
// 初始化登录信息
const init = async () => {
    const res = await Axios("UserSelectMailbox")
    Information.value = res.data
}
</script>

<style scoped lang="scss">
.Sidebottom {
    position: fixed;
    bottom: 6vh;
    width: 100%;
    height: 6vh;
    background: #fff;
    text-align: center;

    .SideBox {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        &>span {
            margin-right: 20px;
        }

        .IoncFont {
            cursor: pointer;

            span {
                vertical-align: middle;
            }

            img {
                width: 30px;
                height: 30px;
                vertical-align: middle;
            }

            .active {
                color: #3119e2;
            }
        }

        button {
            padding: 6px 8px;


        }
    }


}
</style>